
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Form, Row, Col, Card, DatePicker} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';


import PublicTableWrapper from '@/components/TableForm'


const routes = [
    {
      path: '',
      breadcrumbName: 'Rpt Log',
    },
    {
      path: '',
      breadcrumbName: 'Rpt Log',
    }
]


@connect(({ messageandrecord }) => ({
    messageandrecord
}))

class Management extends Component {
    state = {
        // 表格
        columns: [
            {
                title: 'H01 RptGen',
                dataIndex: 'h01',
            },
            {
                title: 'H02 RptSeq',
                dataIndex: 'h02',
            },
            {
                title: 'H03 GW_IMEI',
                dataIndex: 'h03',
                render: (_, record) => (
                    <>
                        <span>{record.h03 ? `${moment.utc(Number(record.h03)).format("YYYY-MM-DD hh:mm:ss")}` : "-"}</span>
                    </>
                ),
            },
            {
                title: 'H26 RptStart',
                dataIndex: 'h26',
                render: (_, record) => (
                    <>
                        <span>{record.h26 ? `${moment.utc(Number(record.h26)).format("YYYY-MM-DD hh:mm:ss")}` : "-"}</span>
                    </>
                ),
            },
            {
                title: 'S39 NK#',
                dataIndex: 's39',
            },
            {
                title: 'P11 Bcns',
                dataIndex: 'p11',
            },
            {
                title: '',
                dataIndex: 'details',
                render: (_, record) => (
                    <>
                        <a
                            onClick={() => this.toMassageDetails(_, record)}
                        >
                            details
                        </a>
                    </>
                ),
            }
        ],
        loading: false,
        data: [],
        page: 1,
        pageSize: 10,
        search: "",
        totalCount: 1,
    }


    componentDidMount () {
        this.initfetch()
    }

    initfetch = () => {
        const { dispatch } = this.props
        const { page, pageSize, search } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandrecord/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                search,
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })
    }


    toMassageDetails = (_, record) => {
        router.push(`/message/details/${record.id}`)
    }
    
    // 分页
    paginationChange = (page, pageSize) => {
        this.setState({
            page,
            pageSize,
        })
        
        const { dispatch } = this.props
        const { search } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandrecord/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                search,
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })
    }

    // 搜索
    handleSearch = () => {
        const { form } = this.props
        const timeList = []
        form.validateFields((err, values) => {
            if (err) { return}
            if (values.date !== undefined) {
                const today = values.date.format('YYYY-MM-DD');
                timeList.push(`time__gte:${moment(`${today} 00:00:00`).valueOf()}`);
                timeList.push(`time__lte:${moment(`${today} 23:59:59`).valueOf()}`);
            }

        })
        const searchString = `&query=${timeList.join(',')}`
        // search record
        this.setState({
            search: searchString,
        })

        // fetch data
        const { dispatch } = this.props
        const { page, pageSize } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandrecord/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                search: searchString,
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })

    }

    handleReset = () => {
        this.props.form.resetFields()
    }

    render () {
        const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 17 } }
        const { getFieldDecorator } = this.props.form



        return (
            <PageHeaderWrapper title="Rpt Log" breadcrumb={{ routes }}>
                <Card>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="Selection date" {...formItemLayout}>
                                {getFieldDecorator('date')(
                                    <DatePicker style={{ width: '90%' }} placeholder="Selection date" />
                                    
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item style={{ display: 'flex' }}>
                                <Button type="primary" htmlType="submit" onClick={this.handleSearch}>
                                Query
                                </Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                                Reset
                                </Button>
                            </Form.Item>
                        </Col>
                    
                    </Row>
                    
                    <PublicTableWrapper
                        loading={this.state.loading}
                        columns={this.state.columns}
                        data={this.state.data}
                        currentpageSize={this.state.pageSize}
                        total={this.state.totalCount}
                        paginationChange={(page, pageSize) => this.paginationChange(page, pageSize)}
                    />

                </Card>
            </PageHeaderWrapper>
        )

    }

}



// export default Management
export default Form.create()(Management)